<template>
  <div class="hand_made">
    <a-button @click="addElem()">手动绘图</a-button>
    <a-button @click="offElem()">橡皮擦</a-button>
  </div>
</template>

<script>
import { Button } from "ant-design-vue";
import Konva from "konva";
import { mapState, mapMutations } from "vuex";
export default {
  name: "handMade",
  components: {
    AButton: Button
  },
  data() {
    return {
      isPaint: false,
      medo: "brush", // 用来控制当前是橡皮擦还是画笔
      graph: {
        attrs: {
          x: 0,
          y: 0
        }
      }
    };
  },
  inject: ["pageStage", "pageLayer"],
  computed: mapState({
    width: state => state.width,
    backgroundColor: state => state.backgroundColor
  }),
  methods: {
    ...mapMutations(["changeClassName"]),
    // 手动绘图按钮回调
    addElem() {
      // 修改当前的工具
      this.changeClassName({ className: "HandMade" });
      // 整个画布
      const stage = this.pageStage.value;
      console.log(stage);
      // 清除遗留事件
      stage.off();
      stage.on("contextmenu", function(e) {
        e.evt.preventDefault();
        return;
      });
      this.medo = "brush";
      const that = this;
      this.stageAll = stage;
      const layer = this.pageLayer.value;
      let lastLine;
      // 鼠标点击进行线的属性初始化
      stage.on("mousedown touchstart", function() {
        that.isPaint = true;
        const pos = stage.getPointerPosition();
        lastLine = new Konva.Line({
          stroke: that.backgroundColor,
          strokeWidth: that.width,
          globalCompositeOperation:
            that.medo === "brush" ? "source-over" : "destination-out",
          points: [pos.x, pos.y]
          // draggable: true
        });
        layer.add(lastLine);
      });
      stage.on("mouseup touchend", function() {
        that.isPaint = false;
      });
      stage.on("mousemove touchmove", function() {
        if (!that.isPaint) {
          return;
        }
        const pos = stage.getPointerPosition();
        const newPoints = lastLine.points().concat([pos.x, pos.y]);
        lastLine.points(newPoints);
        layer.batchDraw();
      });
    },
    //橡皮擦
    offElem() {
      console.log(mapMutations);
      this.changeClassName({ className: "offElem" });
      const stage = this.pageStage.value;
      // stage.off();
      this.medo = "eraser";
      const that = this;
      this.stageAll = stage;
      const layer = this.pageLayer.value;
      let lastLine;
      stage.on("mousedown touchstart", function() {
        that.isPaint = true;
        const pos = stage.getPointerPosition();
        lastLine = new Konva.Line({
          stroke: that.backgroundColor,
          strokeWidth: that.width,
          globalCompositeOperation:
            that.medo === "brush" ? "source-over" : "destination-out",
          points: [pos.x, pos.y]
        });
        layer.add(lastLine);
      });
      stage.on("mouseup touchend", function() {
        that.isPaint = false;
      });
      stage.on("mousemove touchmove", function() {
        if (!that.isPaint) {
          return;
        }
        const pos = stage.getPointerPosition();
        const newPoints = lastLine.points().concat([pos.x, pos.y]);
        lastLine.points(newPoints);
        layer.batchDraw();
      });
    }
  }
};
</script>

<style scoped lang="less">
.hand_made {
  display: flex;
  flex-direction: column;
}
</style>